
<!--
 * @Descripttion: 消息管理
 * @version:
 * @Author: zj
 * @Date: 2020-07-23 10:37
 * @LastEditors: wl
 * @LastEditTime: 
-->
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="70px"
          label-position="left"
        >
          <el-form-item label="标题：">
            <el-col :span="20">
              <el-input
                placeholder="请输入"
                @keydown.enter.native="handleQuery"
                clearable
                v-model="filters.title"
                @clear="getMessage"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="状态：">
            <el-col :span="20">
              <el-select
                v-model="filters.status"
                placeholder="请选择"
                clearable
                @clear="getMessage"
              >
                <el-option
                  @keydown.enter.native="handleQuery"
                  v-for="item in status"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="时间段：">
            <el-date-picker
              v-model="filters.time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="handleQuery('a')"
          >查询</el-button
        >
      </div>
      <div slot="content">
        <el-table
          v-loading="loading"
          element-loading-text="加载中..."
          :data="messageList"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="content" label="内容"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '未读' ? 'danger' : 'success'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间"> </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteMsg(scope.row)"
                v-show="hasPerm('mes:Manage:remove')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asideShow: false,
      filters: {
        title: "",
        status: [],
        time: [],
      },
      initStatus: [0, 1],
      messageList: [],
      start_time: null,
      end_time: null,
      pageRequest: {
        page: 1,
        pageSize: 2,
      },
      loading: false,
      status: [
        { value: 0, name: "未读" },
        { value: 1, name: "已读" },
      ],
      totalSize: 0,
      selections: [],
    };
  },
  methods: {
    // 删除消息
    deleteMsg(row) {
      let selected = [];
      selected.push(row.message_id);
      let params = selected;
      this.$api.message
        .deleteData({
          message_id: params,
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getMessage();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 分页
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.getMessage();
    },
    // 批量删除
    batchDelete() {
      this.$confirm("确认删除选中用户吗？", "提示", "warning").then(() => {
        let selLength = this.selections.length;
        let totalLength = this.messageList.length;
        let isReduce = selLength == totalLength ? true : false;
        let params = this.selections.map((item) => {
          return item.message_id;
        });
        this.$api.message
          .deleteData({
            message_id: params,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              if (isReduce) {
                this.pageRequest.page--;
              }
              this.getMessage();
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    },
    // 内容居中
    cellStyle(row, column, rowIndex, columnIndex) {
      return "text-align:center";
    },
    // 表头居中
    headerCellStyle(row, rowIndex) {
      return "text-align:center";
    },
    handleSelectionChange(val) {
      this.selections = val;
    },

    // 时间查询
    handleQuery(val) {
      let { time, status } = this.filters;

      if (!time) {
        this.getMessage();
      } else {
        this.start_time = time[0];
        this.end_time = time[1];
        this.getMessage();
        this.start_time = null;
        this.end_time = null;
      }
    },
    // 获取消息记录
    getMessage() {
      let that = this;
      this.loading = true;
      let { title, status } = this.filters;
      let params = {};
      if (this.start_time == null || this.end_time == null) {
        params = {
          title,
          page: this.pageRequest.page,
          limit: 2,
          status:
            this.filters.status === "" ? this.initStatus : this.filters.status,
        };
      } else {
        params = {
          title,
          start_time: this.start_time,
          end_time: this.end_time,
          page: this.pageRequest.page,
          limit: 2,
          status:
            this.filters.status === "" ? this.initStatus : this.filters.status,
        };
      }
      this.pageRequest.pageSize = params.limit;
      this.$api.message.getMessageList(params).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          res.data.forEach((item) => {
            item.time = that.timeFormat(item.time);
            item.status = item.status == 0 ? "未读" : "已读";
          });
          this.messageList = res.data;
          this.totalSize = res.count;
        }
      });
    },
    // 日期转换
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    timeFormat(timestamp) {
      var time = new Date(timestamp);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        this.add0(month) +
        "-" +
        this.add0(date) +
        " " +
        this.add0(hours) +
        ":" +
        this.add0(minutes) +
        ":" +
        this.add0(seconds)
      );
    },
  },
  created() {
    this.message_id = this.$route.query.id;
    let that = this;
    this.$bus.$on("changeStatus", () => {
      that.getMessage();
    });
  },
  mounted() {
    this.getMessage();
  },
};
</script>


<style lang="scss">
.el-form-item {
  margin: 0;
}
</style>
